<template>
  <div id="containers" class="h-full w-full">
    <mapContained></mapContained>
    <div class="absolute right-23vw  top-80px bg-#dfebf7cf w-320px listBar z-10">
      <div class="listBar_item">
        <h4>作业点</h4>
        <ul>
          <li v-for="item in homeworkPoint" :key="item.id" @click="pointClick(item)"
            :class="[selectHomework.includes(item.type) ? 'active' : '']">
            <span class="font-size-25px mt3px mr5px">
              <img :src="item.imgPath[0]" alt="" class="pointImg">
            </span> {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="listBar_item">
        <h4>历史飞机轨迹回放</h4>
        <ul>
          <li v-for="item in flightList" :key="item.id" @click="flightClick(item)"
            :class="[selectFlight == item.name ? 'active' : '']">
            <span class="font-size-25px mt3px mr5px">
              <ryicon name="feihangjiaci" />
            </span> {{ item.name }}
          </li>
          <!-- <li>
            <span class="font-size-25px mt3px mr5px">
              <ryicon name="guiji" />
            </span>
            轨迹1
          </li> -->
        </ul>

      </div>
      <div class="listBar_item">
        <h4>安全射界</h4>
        <el-switch size="large" v-model="switchValue" active-text="开启" inactive-text="关闭" @change="shapeChange" />
        <h4>雷达图</h4>
        <el-switch size="large" v-model="leiDaValue" active-text="开启" inactive-text="关闭" @change="leiDaChange" />
      </div>
      <div class="listBar_item">
        <h4>作业点图例</h4>
        <ul>
          <li v-for="item in legendStatus" :key="item.name" class="flex lh-30px items-center p0"
            style="margin: 0; background-color: transparent;">
            <div class="w-20px h-20px mr5px" :style="{ background: item.color, borderRadius: '50%' }"></div>
            <div class="font-size-15px font-600">{{ item.name }}</div>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog draggable destroy-on-close @close="closeDialog" v-model="dialogVisible" title="视频监控" width="1000">
      <div class="w-100% min-h-552px flex flex-col">
        <el-select v-model="videoValue" placeholder="请选择" style="width: 240px;margin: 10px 0;" @change="videoChange">
          <el-option v-for="item in urlOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <div class="flex-1">
          <div id="video-container" v-if="videoValue.length > 0" style="width: 100%; height: 100%"></div>
          <el-empty description="暂无数据" v-else />
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script src="./index.js"></script>

<style lang="scss" scoped>
@forward "./index.scss";
</style>
